<template>
    <section>
        <DetailsHeader title="创建工单" class="mb-24" />
        <div class="page-card">
            <div class="card-header">
                <span class="header-title">请选择问题类型</span>
            </div>

            <div class="issue-modes">
                <div class="issue-mode-card" :class="{ 'active-mode-card': currentIndex == index }"
                    @click="changeIssue(index, item.title)" v-for="(item, index) in issueType">
                    <div class="card-img">
                        <img :src="item.imgSrc" alt="">
                    </div>
                    <div class="card-info">
                        <div>{{ item.title }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">热门相关问题</span>
                <a-button type="primary" @click="handleAdd">创建工单</a-button>
            </div>
            <div class="card-content">
                <div class="issues-item">
                    <div class="issues-list-wrap">
                        <div class="issues-eg" v-for="item in issuesType[currentIndex]?.issuesList" @click="goDocs(item.path)">
                            <span style="cursor: pointer;">{{ item.title }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <GpuDrawer v-model="docVisible" v-if="docVisible" :url="docurl"></GpuDrawer>

    </section>
</template>

<script setup name="IssueGuide">
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import icon_to_number1 from '@/assets/img/console/icon_to_number1.png'
import icon_to_number2 from '@/assets/img/console/icon_to_number2.png'
import icon_to_number3 from '@/assets/img/console/icon_to_number3.png'
import icon_to_number4 from '@/assets/img/console/icon_to_number4.png'
import icon_to_number5 from '@/assets/img/console/icon_to_number5.png'
const router = useRouter()

const issueType = [
    { imgSrc: icon_to_number1, title: '实例' },
    { imgSrc: icon_to_number2, title: '数据存储' },
    { imgSrc: icon_to_number3, title: '账户费用' },
    { imgSrc: icon_to_number4, title: '镜像' },
    { imgSrc: icon_to_number5, title: '其他' },
]

const currentIndex = ref(0)
const currentTitle = ref('')
const changeIssue = (index, title) => {
    currentIndex.value = index
    currentTitle.value = title
}

const handleAdd = () => {
    router.push({ path: '/addWorkOrder', query: { issueType: currentTitle.value } })
}

const issuesType = [
    {
        title: '实例',
        issuesList: [
            {title: '实例计费模式可以变更吗？', path: '/docs/help_document/faq/instance#实例计费模式可以变更吗'},
            {title: 'JupyterLab打不开是怎么回事？', path: '/docs/help_document/faq/instance#jupyterlab打不开是怎么回事'},
            {title: '为什么我不能调用GPU？', path: '/docs/help_document/faq/others/#为什么我不能调用gpu'},
            {title: '实例通过镜像还原后SSH、JupyterLab无法连接？', path: '/docs/help_document/faq/others/#实例通过镜像还原后sshjupyterlab无法连接'}
        ]
    },
    {
        title: '存储',
        issuesList: [
            {title: '系统盘空间不足怎么办？', path: '/docs/help_document/faq/storage/#系统盘空间不足怎么办'},
            {title: '数据盘空间不足怎么办？', path: '/docs/help_document/faq/storage/#数据盘空间不足怎么办'}
        ]
    },
    {
        title: '镜像',
        issuesList: [
            {title: '实例释放后，备份镜像是否还存在？', path: '/docs/help_document/faq/image/#实例释放后备份镜像是否还存在'},
            {title: '备份镜像过大，如何优化？', path: '/docs/help_document/faq/image/#备份镜像过大如何优化'},
            {title: '镜像备份失败，是什么原因？', path: '/docs/help_document/faq/image/#镜像备份失败是什么原因'}
        ]
    },
    {
        title: '账户费用',
        issuesList: [
            {title: '为什么账户余额不为0，但无法退费？', path: '/docs/help_document/faq/price#为什么账户余额不为0但无法退费'},
            {title: '代金券可转移吗？', path: '/docs/help_document/faq/price#代金券可转移吗'},
            {title: '什么时候代金券不支持使用？', path: '/docs/help_document/faq/price#什么时候代金券不支持使用'},
            {title: '如何索要发票？', path: '/docs/help_document/faq/price#如何索要发票'}
        ]
    },
    {
        title: '其他',
        issuesList: [
            {title: '已经释放的实例还能找回数据码？', path: '/docs/help_document/faq/others/#已经释放的实例还能找回数据吗'},
        ]
    },
]

const docVisible = ref(false)
const docurl = ref('')
function goDocs(path) {
    docVisible.value = true
    docurl.value = window.location.origin + path
}

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        .header-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    .issue-modes {
        display: flex;
        align-items: center;

        .issue-mode-card {
            width: 210px;
            display: flex;
            margin-right: 24px;
            padding: 8px;
            background: #F2F8FF;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .card-img {
                margin-right: 16px;
                width: 65px;
                height: 65px;
            }

            .card-info {
                div {
                    color: #223354;
                    font-family: PingFang SC;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                }
            }
        }

        .active-mode-card {
            border: 1px solid #07F;
        }
    }

    .issues-list-wrap {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        .issues-eg {
            width: 50%;
            color: #646F87;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-bottom: 16px;
        }
    }
}
</style>
